// https://tailwindcss.com/docs/functions-and-directives
// @import "tailwindcss/base";
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* You can add global styles to this file, and also import other style files */
@import './theme/mixins/reset';
@import './theme/main.scss';
@import 'highlight.js/scss/atom-one-dark.scss';
@import 'aos/dist/aos.css';

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  width: 100vw;
  max-width: 100%;
  display: block;
  font-size: 1rem;
  line-height: 1.618;
  overflow-x: hidden;
  overflow-y: auto;
}

// fix sidebar position sticky
.mat-drawer-content,
.mat-drawer-container {
  overflow: visible !important;
}

.mat-drawer-content {
  > app-dynamic-component {
    position: relative;
  }
}

.mat-icon {
  display: swap;
}

pre {
  font-size: 0.9em;
  padding: calc(0.8em / 0.9);
  word-break: initial;
  word-wrap: initial;
  white-space: pre;
  overflow: auto;
  border-radius: 4px;

  .hljs {
    background-color: transparent;
  }
}
:root {
  // TODO: 临时修复
  --mdc-text-button-container-height: 36px;
  --mdc-filled-button-container-height: 36px;
  --mdc-protected-button-container-height: 36px;
  --mdc-outlined-button-container-height: 36px;
  --mat-form-field-container-height: 56px;
}
